<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-L-admin1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/xlsx.core.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .body-content {
            padding: 20px;
            overflow: auto;
        }

        table thead th {
            border: 1px solid #000;
            background-color: #76A206;
            color: #fff;
            font-size: 18px;
            width: 120px;
        }

        table thead th span {
            text-align: center;
            width: 55px;
            display: inline-block;
        }

        table thead th span:nth-child(1) {
            display: block;
            width: 120px;
            border-bottom: 1px solid #000;
        }

        table thead th span:nth-child(2) {
            width: 58px;
            border-right: 1px solid #000;
        }

        table tbody tr td {
            border: 1px solid #000;
            background-color: #fff;
            font-size: 16px;
            text-align: center;
            height: 35px;
            line-height: 35px;
        }

        table:nth-child(2) {
            margin-top: 100px;
        }

        table tbody tr td .input-text {
            border: none;
            height: 35px;
            width: 120px;
            background-color: #fff;
            display: block;
        }

        table tbody tr td .input-two-text {
            border: none;
            display: inline-block;
            height: 35px;
            width: 56px;
            background-color: #fff;
        }

        table tbody tr td .input-two-text:nth-child(1) {
            border-right: 1px solid #000;
            width: 58px;
        }

        table tbody tr td input {
            text-indent: 5px;
        }

        table tbody tr td input:focus {
            text-indent: 5px;
            border: none;
            background-color: #999;
            color: #fff;
        }

        table tfoot tr td a {
            color: #fff;
            display: inline-block;
            padding: 0px 20px;
            margin-right: 15px;
            height: 35px;
            line-height: 35px;
            margin-top: 5px;
        }

        .goods-data tfoot {
            height: 40px;
            line-height: 40px;
            text-align: right;
        }
    </style>
</head>
<body>
<div class="body-content">
    <table class="goods-list">
        <thead>
        <tr>
            <th>规格</th>
            <th>压力</th>
            <th>
                <span>配管外径</span>
                <span>A</span>
                <span>B</span>
            </th>
            <th>密封面</th>
            <th>外径</th>
            <th>中心圆直径</th>
            <th>孔数</th>
            <th>孔径</th>
            <th>螺栓</th>
            <th>法兰厚(不含台阶)</th>
            <th>台阶直径</th>
            <th>台阶高度</th>
            <th>
                <span>法兰内径</span>
                <span>A</span>
                <span>B</span>
            </th>
            <th>
                <span>法兰颈</span>
                <span>A</span>
                <span>B</span>
            </th>
            <th>总高(含台阶)</th>
        </tr>
        </thead>
        <tbody id="info">
        {volist name="list" id="value"}
        <tr ondblclick="del(this,'{$value.id}')">
            <td>
                <input type="text" value="{$value.a1}" class="input-text"
                  
                  onchange="change_value(this.value,'a1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.b1}" class="input-text"
                  
                  onchange="change_value(this.value,'b1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.c11}" class="input-two-text"
                  
                  onchange="change_value(this.value,'c11','{$value.id}')">
                <input type="text" value="{$value.c12}" class="input-two-text"
                  
                  onchange="change_value(this.value,'c12','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.d1}" class="input-text"
                  
                  onchange="change_value(this.value,'d1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.e1}" class="input-text"
                  
                  onchange="change_value(this.value,'e1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.f1}" class="input-text"
                  
                  onchange="change_value(this.value,'f1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.g1}" class="input-text"
                  
                  onchange="change_value(this.value,'g1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.h1}" class="input-text"
                  
                  onchange="change_value(this.value,'h1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.i1}" class="input-text"
                  
                  onchange="change_value(this.value,'i1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.j1}" class="input-text"
                  
                  onchange="change_value(this.value,'j1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.k1}" class="input-text"
                  
                  onchange="change_value(this.value,'k1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.l1}" class="input-text"
                  
                  onchange="change_value(this.value,'l1','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.m11}" class="input-two-text"
                  
                  onchange="change_value(this.value,'m11','{$value.id}')">
                <input type="text" value="{$value.m12}" class="input-two-text"
                  
                  onchange="change_value(this.value,'m12','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.n11}" class="input-two-text"
                  
                  onchange="change_value(this.value,'n11','{$value.id}')">
                <input type="text" value="{$value.n12}" class="input-two-text"
                  
                  onchange="change_value(this.value,'n12','{$value.id}')">
            </td>
            <td>
                <input type="text" value="{$value.o1}" class="input-text"
                  
                  onchange="change_value(this.value,'o1','{$value.id}')">
            </td>
        </tr>
        {/volist}
        </tbody>
        <tfoot>
        <tr>
            <td colspan="15">
                <span style="float: left;">双击删除</span>
                <div class="page">{$list|raw}</div>
            </td>
        </tr>
        </tfoot>
    </table>
    <table class="goods-data">
        <thead>
        <tr>
            <th>规格</th>
            <th>压力</th>
            <th>
                <span>配管外径</span>
                <span>A</span>
                <span>B</span>
            </th>
            <th>密封面</th>
            <th>外径</th>
            <th>中心圆直径</th>
            <th>孔数</th>
            <th>孔径</th>
            <th>螺栓</th>
            <th>法兰厚(不含台阶)</th>
            <th>台阶直径</th>
            <th>台阶高度</th>
            <th>
                <span>法兰内径</span>
                <span>A</span>
                <span>B</span>
            </th>
            <th>
                <span>法兰颈</span>
                <span>A</span>
                <span>B</span>
            </th>
            <th>总高(含台阶)</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="text" id="A1" class="input-text" placeholder="规格"></td>
            <td><input type="text" id="B1" class="input-text" placeholder="压力"></td>
            <td>
                <input type="text" id="C11" class="input-two-text" placeholder="A">
                <input type="text" id="C12" class="input-two-text" placeholder="B">
            </td>
            <td><input type="text" id="D1" class="input-text" placeholder="密封面"></td>
            <td><input type="text" id="E1" class="input-text" placeholder="外径"></td>
            <td><input type="text" id="F1" class="input-text" placeholder="中心圆直径"></td>
            <td><input type="text" id="G1" class="input-text" placeholder="孔数"></td>
            <td><input type="text" id="H1" class="input-text" placeholder="孔径"></td>
            <td><input type="text" id="I1" class="input-text" placeholder="螺栓"></td>
            <td><input type="text" id="J1" class="input-text" placeholder="法兰厚"></td>
            <td><input type="text" id="K1" class="input-text" placeholder="台阶直径"></td>
            <td><input type="text" id="L1" class="input-text" placeholder="台阶高度"></td>
            <td>
                <input type="text" id="M11" class="input-two-text" placeholder="A">
                <input type="text" id="M12" class="input-two-text" placeholder="B">
            </td>
            <td>
                <input type="text" id="N11" class="input-two-text" placeholder="A">
                <input type="text" id="N12" class="input-two-text" placeholder="B">
            </td>
            <td><input type="text" id="O1" class="input-text" placeholder="总高"></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td colspan="15">
                {eq name="userInfo.username" value="admin"}
                <a href="javascript:addAll();" style="background-color: #76A206;">上传表格</a>
                <a href="javascript:insert();" style="background-color: #76A206;">添加</a>
                {else}
                <a href="javascript:;" style="background-color:#757575 ;">上传表格</a>
                <a href="javascript:;" style="background-color:#757575 ;">添加</a>
                {/eq}
            </td>
        </tr>
        </tfoot>
    </table>
</div>
<input type="file" style="display: none;" id="xlsx-file">
</body>
<script>
  var xlsx_data = '';
  // onload_input();
  function change_value(value, key, id) {
      console.log({id: id, key: key, value: value});
      $.ajax({
          url: '/admin/goods/save', // 你的 PHP 脚本的 URL
          type: 'post', // 请求类型，可以是 'GET' 或 'POST'
          dataType: 'json', // 预期服务器返回的数据类型
          data: {id: id, key: key, value: value},
          success: function (res) {
              if (res.code == 200) {
                  // console.log(res);
                  location.reload();
              } else {
                  alert(data.msg);
              }
          }
      });
  }

  function del(obj,id){
    layer.confirm('确认要删除吗？',function(index){
        //发异步删除数据
        $(obj).remove();
        $.ajax({
            url: '/admin/goods/delete/?id=' + id, // 你的 PHP 脚本的 URL
            type: 'get', // 请求类型，可以是 'GET' 或 'POST'
            dataType: 'json', // 预期服务器返回的数据类型
            success: function(data) {
              location.reload();
            }
        });
    });
    
  }

  function insert() {
      let data = {}, inputs = document.getElementsByTagName('input');
      for (let index in inputs) {
          if (!inputs[index].id) continue;
          if (inputs[index].id == 'xlsx-file') continue;
          data[inputs[index].id] = inputs[index].value;
      }
      console.log(data);
      $.ajax({
          url: '/admin/goods/save', // 你的 PHP 脚本的 URL
          type: 'post', // 请求类型，可以是 'GET' 或 'POST'
          dataType: 'json', // 预期服务器返回的数据类型
          data: data,
          success: function (res) {
              if (res.code == 200) {
                  // console.log(res);
                  location.reload();
              } else {
                  alert(data.msg);
              }
          }
      });
  }

  function setCost() {
      if (xlsx_data) {
          data = {xlsx_data: xlsx_data};
          $.ajax({
              url: '/admin/goods/save', // 你的 PHP 脚本的 URL  
              type: 'post', // 请求类型，可以是 'GET' 或 'POST'  
              dataType: 'json', // 预期服务器返回的数据类型  
              data: data,
              success: function (data) {
                  // hidePopup();
                  if (data.code == 200) {
                      location.reload();
                  } else {
                      alert(data.msg);
                  }
              }
          });
      } else {
          layer.alert('没有选择xlx文件');
      }
  }

  // 可以在这里调用showPopup函数来显示弹出文本框，例如通过某个按钮的点击事件
  function addAll() {
      document.getElementById('xlsx-file').click();
  }

  $(function () {
      document.getElementById('xlsx-file').addEventListener('change', function (e) {
          var files = e.target.files;
          if (files.length == 0) return;
          var f = files[0];
          if (!/\.xlsx$/g.test(f.name) && !/\.xls$/g.test(f.name)) {
              alert('仅支持读取xlsx和xls格式！');
              return;
          }
          readWorkbookFromLocalFile(f, function (workbook) {
              readWorkbook(workbook);
          });
      });
  });

  // 读取本地excel文件
  function readWorkbookFromLocalFile(file, callback) {
      var reader = new FileReader();
      reader.onload = function (e) {
          var data = e.target.result;
          var workbook = XLSX.read(data, {type: 'binary'});
          if (callback) callback(workbook);
      };
      reader.readAsBinaryString(file);
  }

  function readWorkbook(workbook) {
      var sheetNames = workbook.SheetNames; // 工作表名称集合
      var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
      var csv = XLSX.utils.sheet_to_csv(worksheet);
      xlsx_data = csv;
      setCost();
      // showPopup();
  }
</script>
</html>